<template>
  <a-spin tip="Loading..." :spinning="spinning">
  <div>
    <a-row>
      <a-col span="10">
        
          <a-button style="margin-right:8px" id="print_true" @click="moreDec" disabled>批量删除</a-button>
          <a-button style="margin-right:8px" type="primary" @click="() => { $router.push({name:'charge_be_pay_import'})}">导入已缴账单</a-button>
          <a-button style="margin-right:8px" type="primary" @click="export_se">导出已缴账单</a-button>
          <!--<a-button style="margin-right:8px" type="primary" @click="exportModal2">导出已缴账单</a-button>-->
          <!-- <a-button @click="exportModal2">导出已缴列表</a-button> -->
          <a-button style="margin-right:8px" id="print_true1" :disabled="true" @click="print_c">打印</a-button>
          <a-modal style="margin-right:8px" title="打印" :visible="print_lop" :width="600" @ok="ok_print" @cancel="cancel_print">
            <a-row>
              <a-col span="15">
                模板：
                <a-select style="width: 240px" @change="print_func">
                  <a-select-option v-for="(item,i) in modelList" :key="i">
                    {{item.name}}
                  </a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-modal>
        
      </a-col>
      <a-modal
              title="导出已缴账单"
              :visible="exportVisible"
              @ok="exportOk"
              @cancel="exportCancel"
      >
        <a-row>
          <a-form>
            <a-col span="24">
              <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-select placeholder="请选择所属小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选择小区'}]}]">
                  <a-select-option v-for="(item,index) in bd_info" @click="bdPro(index)" :key="index" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-form>
        </a-row>
      </a-modal>
      <a-modal
              title="导出已缴列表"
              :visible="exportVisible2"
              @ok="exportOk2"
              @cancel="exportCancel2"
      >
        <a-row>
          <a-form>
            <a-col span="24">
              <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-select placeholder="请选择所属小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选择小区'}]}]">
                  <a-select-option v-for="(item,index) in bd_info" @click="bdPro2(index)" :key="index" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item label="类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-select placeholder="请选择类型">
                  <a-select-option v-for="(item,index) in type_list" @click="bd_see(index)" :key="index" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item label="费用名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="messages"></a-input>
              </a-form-item>
            </a-col>
          </a-form>
        </a-row>
      </a-modal>
      <a-modal
              title="确认窗口"
              :visible="show_se"
              @ok="exportOk1"
              @cancel="export_se_cel"
      >
        <span v-for="(item,index) in qu_s" :key="index" style="padding: 3px;font-size: 16px">{{item}}<br /></span>
      </a-modal>
      <a-col span="7" offset="6">
        <a-row type="flex" justify="space-around">
          <a-col span="18">
            <a-input-search v-model="gj_name_value" placeholder="房号/车位/车辆/缴费人/手机号" @search="onSearch"></a-input-search>
          </a-col>
          <a-col span="2">
            <a-button @click="searchModal">
              <a-icon type="filter"/>
            </a-button>
          </a-col>
          <a-modal
                  title="高级搜索"
                  :visible="searchVisible"
                  @ok="searchOk"
                  :confirmLoading="confirmLoading"
                  @cancel="searchCancel"
          >
            <a-row>
              <a-form>
                <a-col span="24">
                  <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-select placeholder="请选择小区">
                      <a-select-option v-for="(item,index) in bd_info" :key="index" :value="item.id" @click="bd_click(item.id)">{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="支付时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                      <a-date-picker @change="start_time" style="width: 100%" />
                    </a-form-item>
                    <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
                    <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                      <a-date-picker @change="end_time" style="width: 100%" />
                    </a-form-item>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="操作员" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-select placeholder="请选择操作员">
                      <a-select-option v-for="(item,index) in userAdmin" :key="index" :value="item.id" @click="admin_click(item.name)">{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="状态" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-select placeholder="请选择状态" @change="status_click">
                      <a-select-option :key="0" :vaule="0">全部</a-select-option>
                      <a-select-option :key="1" :vaule="1">已缴</a-select-option>
                      <a-select-option :key="2" :vaule="2">已退</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-select placeholder="请选择类型" @change="type_click">
                      <a-select-option :key="0" :vaule="0">全部</a-select-option>
                      <a-select-option :key="1" :vaule="1">房屋</a-select-option>
                      <a-select-option :key="2" :vaule="2">车位</a-select-option>
                      <a-select-option :key="3" :vaule="3">车辆</a-select-option>
                      <a-select-option :key="4" :vaule="4">住户</a-select-option>
                      <a-select-option :key="5" :vaule="5">其它收费</a-select-option>
                      <a-select-option :key="6" :vaule="6">临时停车费</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="数据标签" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-select placeholder="请选择标签">
                      <a-select-option v-for="(item,index) in labels" :key="index" :value="item.id" @click="lab_click(item.id)">{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="收款方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-select placeholder="请选择收款方式" @change="sou_click">
                      <a-select-option value="0">
                        全部
                      </a-select-option>
                      <a-select-option value="1">
                        线下支付-现金
                      </a-select-option>
                      <a-select-option value="2">
                        线下支付-支票
                      </a-select-option>
                      <a-select-option value="3">
                        线下支付-银行转账
                      </a-select-option>
                      <a-select-option value="4">
                        线下支付-pos机刷卡
                      </a-select-option>
                      <a-select-option value="5">
                        线下支付-支付宝直接转账
                      </a-select-option>
                      <a-select-option value="6">
                        线下支付-微信直接转账
                      </a-select-option>
                      <a-select-option value="7">
                        小区收款码-支付宝
                      </a-select-option>
                      <a-select-option value="8">
                        小区收款码-微信
                      </a-select-option>
                      <a-select-option value="9">
                        网上缴费1
                      </a-select-option>
                      <a-select-option value="10">
                        网上缴费2
                      </a-select-option>
                      <a-select-option value="11">
                        网上缴费3
                      </a-select-option>
                      <a-select-option value="12">
                        账户余额
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="应收金额区间" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-input v-on:keyup="jine_min" style="width: 45%;" placeholder="最小"></a-input>
                    <a-input v-on:keyup="jine_max" style="margin-left:5%;width: 45%;" placeholder="最大"></a-input>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="实收金额区间" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-input v-on:keyup="jine_min_s" style="width: 45%;" placeholder="最小"></a-input>
                    <a-input v-on:keyup="jine_max_s" style="margin-left:5%;width: 45%;" placeholder="最大"></a-input>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="关键词" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-input v-on:keyup="gj_name" v-model="gj_name_value" placeholder="房号/车位号/车牌号/住户/手机"></a-input>
                  </a-form-item>
                </a-col>
              </a-form>
            </a-row>
          </a-modal>
        </a-row>
      </a-col>
      <a-modal
              title="退款"
              :visible="exportVisible3"
              @ok="tuiOk"
              @cancel="tuiCancel"
              width="1000px"
      >
        <a-row>
          <a-form>
              <a-row>
                <a-col span="6">
                  缴费人：{{pay_info.house_user.name}}
                </a-col>
                <a-col span="6">
                  收款人：{{pay_info.action_user}}
                </a-col>
                <!--<a-col span="6">-->
                  <!--付款日期：{{pay_info.pay_time}}-->
                <!--</a-col>-->
                <a-col span="6">
                  付款方式：{{pay_info.pay_style_text}}
                </a-col>
              </a-row>
              <a-row>
                <a-col span="6">
                  应收金额：¥{{pay_info.price}}
                </a-col>
                <a-col span="6">
                  实收金额：¥{{pay_info.money}}
                </a-col>
                <a-col span="6">
                  备注：{{pay_info.remarks}}
                </a-col>
              </a-row>
            <a-row>
            <s-table ref="tables"
                     :columns="columns3"
                     :rowSelection="{ selectedRowKeys: selectedRowKeys3, onChange: onSelectChange3,getCheckboxProps:getCheckboxProps3 }"
                     :data="dataSource3"
                     :loading="loading"
                     :scroll="{ x: 1400}"
                  
            >
              <template slot="remark_list" slot-scope="text, record">
                <a-tooltip placement="left">
                  <template slot="title">
                    <p v-for="(item,index) in record.remark_list">{{item}}</p>
                  </template>
                  <a-icon type="bars" style="cursor: pointer;">{{text}}</a-icon>
                </a-tooltip>
              </template>
              <template slot="price" slot-scope="text, record">
                <a-tooltip placement="right">
                  <template slot="title">
                    <p>单价：¥{{record.one_money}}</p>
                    <p>数量：{{record.num}}</p>
                  </template>
                  <span>{{text}}</span>
                </a-tooltip>
              </template>
              <template slot="money" slot-scope="text, record">
                ¥{{text}}
              </template>
              <template slot="overdue" slot-scope="text, record">
                ¥{{text}}
              </template>
              <template slot="offer" slot-scope="text, record">
                ¥{{text}}
              </template>
            </s-table>
            </a-row>
          </a-form>
        </a-row>
      </a-modal>
    </a-row>
    <p style="margin-top:1em;margin-bottom:0;">导出说明：请先通过筛选搜索账单后导出，未搜索直接导出将导出全部账单，单次导出账单上线为5000条</p>
    <br />
    <a-row>
      <s-table ref="table"
        :columns="columns"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :data="dataSource"
        :loading="loading"
        :scroll="{ x: 1500}"

      >
        <template slot="info" slot-scope="text, record">
          {{text}}
          <a-tooltip placement="left">
            <template slot="title">
              <p>{{record.label}}</p>
            </template>
            <a-icon type="bars" style="cursor: pointer;"></a-icon>
          </a-tooltip>
        </template>
        <template slot="user_text" slot-scope="text, record">
          <span>{{record.u_name}}</span><br/>
          <span>{{record.u_phone}}</span>
        </template>
        <template slot="remarks" slot-scope="text, record">
          <a-tooltip placement="left">
            <template slot="title">
              <p>{{text}}</p>
            </template>
            <a-icon type="bars" style="cursor: pointer;"></a-icon>
          </a-tooltip>
        </template>
        <a slot="action" slot-scope="text,record" href="javascript:;">
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" href="#">
              操作
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
                <a-menu-item key="1" @click="pay_type($event,record.id)">详情</a-menu-item>
                <a-menu-item key="2" @click="pay_type($event,record.id)">打印</a-menu-item>
                <a-menu-item key="3" @click="pay_type($event,record.id)">退款</a-menu-item>
                <a-menu-item key="4">
                  <a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
                    <a style="padding-top: 3px">删除</a>
                  </a-popconfirm>
                </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a>
      </s-table>
      <a-row style="height:45px;background-color: #fafafa;border-bottom: 1px solid #e8e8e8" type="flex" justify="center">
            <a-col span="12"></a-col>
            <a-col span="4" align="center" style="line-height:45px">
              统计：
            </a-col>
            <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
              应收金额
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              实收金额
            </a-col>
          
        </a-row>
        <a-row style="height:45px;background-color: #fafafa;" type="flex" justify="center">
            <a-col span="12"></a-col>
            <a-col span="4" align="center" style="line-height:45px">
              小计：
            </a-col>
            <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
              ¥{{xp}}
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              ¥{{xm}}
            </a-col>
          
        </a-row>
        <a-row style="height:45px;background-color: #fafafa;" type="flex" justify="center">
            <a-col span="12"></a-col>
            <a-col span="4" align="center" style="line-height:45px">
              合计：
            </a-col>
            <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
              ¥{{ps}}
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              ¥{{ms}}
            </a-col>
          
        </a-row>
      
    </a-row>
    <div v-show="false" id="model_t">
      <div class="ptl" v-for="(tem, indexs) in m_list">
        <div class="ptl1">
          <div class="aio">
            <template v-for="(tag, index) in mod1">
              <div v-if="tag.pid == 1" style="margin:0 auto;font-size: 25px;">
                <span>{{tag.name}}</span>
              </div>
              <div class="ptl1_head" v-else-if="tag.pid == 2" style="margin-top:-30px;">
                <span><img class="wu_pic" src="/img/logo.417bbe7f.png" alt="物业"></span>
              </div>
              <div class="ptl1_head" v-else-if="tag.pid == 3" style="margin-top:-30px;float: right;">
                <span>{{tag.name}}：{{g_pid2(tag.pid,tem,tag.name)}}</span>
              </div>
            </template>
          </div>
          <div class="aio">
            <template v-for="(tag, index) in mod1">
              <div v-if="tag.pid > 3 && (index+1)%3 === 0" class="ptl1_head alts" style="float: right;">
                <span>{{tag.name}}：{{g_pid2(tag.pid,tem,tag.name)}}</span>
              </div>
              <div v-else-if="tag.pid > 3" class="ptl1_head alts">
                <span>{{tag.name}}：{{g_pid2(tag.pid,tem,tag.name)}}</span>
              </div>
            </template>
          </div>
        </div>
        <div class="ptl2">
          <a-table ref="table"
                   :columns="columns_t"
                   :dataSource="tem"
                   bordered="bordered"
                   :pagination="false"
          ></a-table>
        </div>
        <div class="ptl3">
          <div class="aio">
            <template v-for="(tag, index) in mod3">
              <div v-if="tag.pid > 3 && (index+1)%3 === 0" class="ptl1_head alts" style="float: right;">
                <span>{{tag.name}}：{{g_pid(tag.pid,tem,tag.name)}}</span>
              </div>
              <div v-else-if="tag.pid > 3" class="ptl1_head alts">
                <span>{{tag.name}}：{{g_pid(tag.pid,tem,tag.name)}}</span>
              </div>
            </template>
          </div>
        </div>
      </div>
      <!--<div style="font-size: 20px;text-align: center;font-weight:bold;">{{print_model.name}}</div><br/>-->
      <!--<table style="width: 100%; border-collapse: collapse;">-->
        <!--<thead>-->
        <!--<tr style="border-bottom: 1px solid #000000;">-->
          <!--<td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">房屋/车位/车辆</td>-->
          <!--<td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">缴费人</td>-->
          <!--<td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">收费项目</td>-->
          <!--<td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">应缴金额</td>-->
          <!--<td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">实收金额</td>-->
          <!--<td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">支付时间</td>-->
          <!--<td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">状态</td>-->
          <!--<td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">操作员</td>-->
          <!--<td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">备注</td>-->
        <!--</tr>-->
        <!--</thead>-->
        <!--<tbody>-->
        <!--<tr v-for="(item,index) in selectArr">-->
          <!--<td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.info}}</td>-->
          <!--<td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.user_text}}</td>-->
          <!--<td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.name}}</td>-->
          <!--<td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.price}}</td>-->
          <!--<td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.money}}</td>-->
          <!--<td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.pay_time}}</td>-->
          <!--<td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.status_text}}</td>-->
          <!--<td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.action_user}}</td>-->
          <!--<td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.remarks}}</td>-->
        <!--</tr>-->
        <!--</tbody>-->
      <!--</table>-->
    </div>
  </div>
  </a-spin>
</template>

<script>
import { getPayMentList,moreDec,dep_det,payBack,pay_det,payStoreBack } from '@/api/cashier'
import { mapGetters } from 'vuex'
import { getLodop } from '@/utils/LodopFuncs'
import {STable} from '@/components'
export default {
    name: 'charge_be_pay_payRecord',
    components: {
        STable
    },
    data() {
        return {
            data: [],
            data3: [],
            dataSource1:[{'name':''}],
            mod1:[],
            mod2:[],
            mod3:[],
            m_list:[],
            columns_t:[{title: ''}],
            spinning:false,
            exportVisible: false,
            exportVisible2: false,
            exportVisible3: false,
            bd_pro_id:0,
            bd_pro_id2:0,
            messages:'',
            bd_info:[],
            select_pay:[],
            select_pay3:[],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
            type_list:[{name:'房屋',id:1},{name:'车辆',id:2},{name:'车位',id:3}],
            loading:false,
            lei:0,
            baseURL:this.axios.defaults.baseURL,
            columns: [
                { title: 'ID', width: 100, dataIndex: 'id' },
                { title: '小区', width: 100, dataIndex: 'bd_info_id_text' },
                { title: '房屋/车位/车辆', width: 200, dataIndex: 'info',scopedSlots: { customRender: 'info' } },
                { title: '缴费人', width: 150, dataIndex: 'user_text',align:'center',scopedSlots: { customRender: 'user_text' } },
                // { title: '费用名称', width: 150, dataIndex: 'name' },
                { title: '应收金额', width: 100, dataIndex: 'price' },
                { title: '实收金额', width: 100, dataIndex: 'money' },
                { title: '支付时间', width: 150, dataIndex: 'pay_time' },
                { title: '操作员', width: 100, dataIndex: 'action_user' },
                { title: '状态', width: 100, dataIndex: 'status_text' },
                { title: '备注', width: 100, dataIndex: 'remarks',scopedSlots: { customRender: 'remarks' } },
                {
                    title: '操作',
                    key: 'operation',
                    fixed: 'right',
                    width: 100,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            columns3: [
                { title: '状态', width: 100, dataIndex: 'status' },
                { title: '类型', width: 100, dataIndex: 'type' },
                // { title: '小区', width: 100, dataIndex: 'bd_info_id_text' },
                { title: '房号/车位号/车牌', width: 200, dataIndex: 'info' },
                // { title: '缴费人', width: 100, dataIndex: 'user_id_name',align:'center' },
                { title: '费用名称', width: 200, dataIndex: 'name' },
                { title: '开始时间', width: 140, dataIndex: 'start_time' },
                { title: '结束时间', width: 140, dataIndex: 'end_time' },
                { title: '数量', width: 100, dataIndex: 'num' },
                { title: '应收金额', width: 100,align:'right', dataIndex: 'price',scopedSlots: { customRender: 'price' } },
                { title: '优惠金额', width: 100,align:'right', dataIndex: 'offer',scopedSlots: { customRender: 'offer' } },
                { title: '滞纳金', width: 100,align:'right', dataIndex: 'overdue',scopedSlots: { customRender: 'overdue' } },
                { title: '折扣', width: 100, dataIndex: 'deduction' },
                // { title: '费用名称', width: 150, dataIndex: 'name' },
                // { title: '应收金额', width: 100, dataIndex: 'price' },
                { title: '实收金额', width: 100, dataIndex: 'money',scopedSlots: { customRender: 'money' } },
                // { title: '支付时间', width: 200, dataIndex: 'pay_time' },
                // { title: '操作员', width: 100, dataIndex: 'action_user' },
                { title: '备注', width: 150, dataIndex: 'remark_list',scopedSlots: { customRender: 'remark_list' } },
                // { title: '状态', width: 150, dataIndex: 'status_text' },
                // { title: '缴费备注', width: 150, dataIndex: 'remarks',scopedSlots: { customRender: 'remarks' } },
                // {
                //     title: '操作',
                //     key: 'operation',
                //     fixed: 'right',
                //     width: 100,
                //     scopedSlots: { customRender: 'action' }
                // }
            ],
            print_lop: false,
            print_m: false,
            labels:[],
            print_model:[],
            modelList: [],
            selectArr: [],
            searchVisible: false,
            userAdmin:[],
            bd_id:0,
            pay_info:{'house_user':'','data_info':'','action_user':'','pay_time':'','pay_style_text':'','price':'','money':'','remarks':''},
            jine_max_val:'',
            jine_min_val:'',
            jine_max_val_s:'',
            jine_min_val_s:'',
            gj_name_value:'',
            status:'',
            payment_id:0,
            house_name:'',
            sou:'',
            qu_s:'',
            confirmLoading:false,
            show_se:false,
            selectedRowKeys: [],
            selectedRowKeys3: [],
            lab_id:0,
            ps:0,
            ms:0,
            xp:0,
            xm:0,
            now_time:'',
            back_tui:[],
            pas:[],
            name_c:'',
            queryParam: {},
            dataSource:parameter => {
                this.pas = parameter;
                return this.getList(Object.assign(parameter, this.queryParam))
                    .then(res => {
                        return res
                    })
            },
            dataSource3:parameter => {
                this.pas = parameter;
                this.pas['payment_id'] = this.payment_id;
                return this.getList3(Object.assign(parameter))
                    .then(res => {
                        return res
                    })
            },
        }
    },
    computed: {
        rowSelection() {
            const { selectedRowKeys } = this
            return {
                selectedRowKeys,
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.name === 'Disabled User',
                        name: record.name
                    }
                })
            }
        },
        rowSelection3() {
            const { selectedRowKeys3 } = this;
            return {
                selectedRowKeys3,
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        name: record.name
                    }
                })
            }
        },
    },
    mounted() {
        this.getBdList();
        this.getDepInfo();
        this.getLabList();
        this.getUser();
        this.get_edit(1);
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        exportOk1() {
            this.spinning=true;
            this.baseExcDate={pageNo:1,pageSize:100};
            this.exportVisible = false;
            let qu = [];
            if (this.gj_name_value) {
                qu['name'] = this.gj_name_value;
            } else {
                qu['name'] = this.house_name_value;
            }
            qu['type'] = this.type;
            qu['start_time'] = this.start_time_value;
            qu['end_time'] = this.end_time_value;
            qu['jine_max'] = this.jine_max_val;
            qu['jine_min'] = this.jine_min_val;
            qu['jine_max_s'] = this.jine_max_val_s;
            qu['jine_min_s'] = this.jine_min_val_s;
            qu['gj_name_value'] = this.gj_name_value;
            qu['status'] = this.status;
            qu['admin'] = this.admin;
            qu['sou'] = this.sou;
            qu['lab_id'] = this.lab_id;
            qu['bd_id'] = this.bd_id;
            this.escec(Object.assign(this.baseExcDate, qu))
        },
        export_se_cel(){
            this.show_se = false;
        },
        export_se () {
            let qu = '';
            if (this.gj_name_value) {
                qu = this.gj_name_value;
            } else {
                qu = this.house_name_value;
            }
            let dit = {name:qu,
                type:this.type,
                start_time:this.start_time_value,
                end_time:this.end_time_value,
                jine_max:this.jine_max_val,
                jine_min:this.jine_min_val,
                jine_max_s:this.jine_max_val_s,
                jine_min_s:this.jine_min_val_s,
                status:this.status,
                admin:this.admin,
                sou:this.sou,
                lab_id:this.lab_id,
                bd_id:this.bd_id};
            this.axios({
                method:'post',
                url:'/cashier/pay_exp_se',
                data:Object.assign(dit,{token:this.token()})
            }).then(res => {
                if(res.code==0){
                    this.show_se = true;
                    this.qu_s = res.msg;
                }else if(res.code==1000){
                    this.spinning=false;
                }else{
                    this.spinning=false;
                    this.$message.warning(res.msg,2)
                }
            }).catch(err => {
                this.spinning=false;
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.loading = false;
            })
        },
        lab_click(v){
            this.lab_id = v;
        },
        getLabList(){
            this.axios({
                method:'get',
                url:'/community/get_lab_list',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    let ifo = {id:0,name:'全部'};
                    data.unshift(ifo);
                    this.labels = data
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        onSelectChange (selectedRowKeys,selectedRows) {
            this.selectedRowKeys=selectedRowKeys;
            this.select_pay = [];
            for (let i = 0;i < selectedRowKeys.length;i++) {
                this.select_pay.push(this.data[selectedRowKeys[i]].id)
            }
            if (selectedRowKeys.length > 0) {
                this.selectArr = selectedRows;
                document.getElementById('print_true').disabled='';
                document.getElementById('print_true1').disabled='';
            } else {
                this.selectArr = [];
                document.getElementById('print_true').disabled=true;
                document.getElementById('print_true1').disabled=true;
            }
        },
        onSelectChange3 (selectedRowKeys) {
            this.selectedRowKeys3 = selectedRowKeys;
            for (let i = 0;i < selectedRowKeys.length;i++) {
                this.back_tui.push(this.data3[selectedRowKeys[i]].id)
            }
        },
        getCheckboxProps3 (record) {
            return ({
                props: {
                    disabled: record.status === '已退'
                }
            })
        },
        tuiOk(){
            payStoreBack({token:this.token(),back_tui:this.back_tui})
                .then(res => {
                    if(res.code === 0){
                        this.$message.success(res.msg,1);
                        this.$refs.tables.refresh();
                        this.$refs.table.refresh();
                        this.exportVisible3 = false;
                        this.back_tui = [];
                        this.r_c();
                        // this.$refs.dialogTable.toggleRowSelection(item, false)
                    }else{
                        this.$message.error(res.msg,2);
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
        r_c(){
            this.selectedRowKeys3 = [];
        },
        tuiCancel(){
            this.r_c();
            this.exportVisible3 = false;
        },
        searchOk() {
            this.searchVisible = false;
            this.queryParam['type'] = this.type;
            this.queryParam['start_time'] = this.start_time_value;
            this.queryParam['end_time'] = this.end_time_value;
            this.queryParam['jine_max'] = this.jine_max_val;
            this.queryParam['jine_min'] = this.jine_min_val;
            this.queryParam['jine_max_s'] = this.jine_max_val_s;
            this.queryParam['jine_min_s'] = this.jine_min_val_s;
            this.queryParam['name'] = '';
            this.house_name = '';
            this.queryParam['gj_name_value'] = this.gj_name_value;
            this.queryParam['status'] = this.status;
            this.queryParam['admin'] = this.admin;
            this.queryParam['sou'] = this.sou;
            this.queryParam['bd_id'] = this.bd_id;
            this.queryParam['lab_id'] = this.lab_id;
            this.$refs.table.refresh(true);
        },
        searchCancel() {
            this.searchVisible = false
        },
        bd_click(v){
            this.bd_id = v;
        },
        getUser(){
            this.axios({
                method:'get',
                url:'/community/get_bd_user',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    this.userAdmin = data
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        start_time(date, dateString) {
            this.start_time_value = dateString;
        },
        end_time(date, dateString){
            this.end_time_value = dateString;
        },
        gj_name(v){
            this.gj_name_value = v.target.value;
        },
        jine_min(v){
            this.jine_min_val = v.target.value;
        },
        jine_max(v){
            this.jine_max_val = v.target.value;
        },
        jine_min_s(v){
            this.jine_min_val_s = v.target.value;
        },
        jine_max_s(v){
            this.jine_max_val_s = v.target.value;
        },
        type_click(v){
            this.type = v;
        },
        status_click(v){
            this.status = v;
        },
        admin_click(v){
            this.admin = v;
        },
        sou_click(v){
            this.sou = v;
        },
        getList(param) {
            return new Promise((resolve,reject) => {
                this.axios({
                    method:'get',
                    url: '/cashier/get_pay_list',
                    params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()})
                }).then(res => {
                    if(res.code === 0){
                        resolve(res.data);
                        this.data = res.data['data'];
                        this.ps = res.data['ps'];
                        this.ms = res.data['ms'];
                        this.xp = res.data['x_p'];
                        this.xm = res.data['x_m'];
                    }else{
                        this.$message.error(res.data.msg,2);
                    }
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                    this.loading = false;
                })
            })
        },
        getList3(param) {
            return new Promise((resolve,reject) => {
                this.axios({
                    method:'get',
                    url: '/cashier/get_pay_store_list',
                    params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()})
                }).then(res => {
                    if(res.code === 0){
                        resolve(res.data);
                        this.data3 = res.data['data'];
                    }else{
                        this.$message.error(res.data.msg,2);
                    }
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                    this.loading = false;
                })
            })
        },
        exportModal() {
            this.exportVisible = true
        },
        exportModal2() {
            this.exportVisible2 = true
        },
        bdPro(v){
            this.bd_pro_id = this.bd_info[v].id;
        },
        bdPro2(v){
            this.bd_id = this.bd_info[v].id;
        },
        bd_see(v){
            this.lei = this.type_list[v].id;
        },
        remove(id) {
            this.select_pay = [id];
            this.moreDec();
        },
        getDepInfo() {
            dep_det({token:this.token()}).then(res => {
                this.modelList = res.data.model;
            }).catch(err => {
                console.log(err)
            })
        },
        searchModal() {
            this.searchVisible = true
        },
        moreDec(){
            moreDec(Object.assign({ids:this.select_pay},{token:this.token()})).then(res => {
                if(res.code == 0) {
                    this.$notification.success({
                        message: '成功',
                        description: res.msg
                    });
                    setTimeout(() => {
                        this.selectedRowKeys=[];
                        this.$refs.table.refresh(true);
                    }, 1000)
                } else {
                    this.$notification['error']({
                        message: '错误',
                        description: res.msg,
                        duration: 4
                    })
                }

            }).catch(err => {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                    duration: 4
                })
            })
        },
        getBdList(){
            this.axios({
                method:'get',
                url:'/community/get_bd_config_list',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    let ifo = {id:0,name:'所有小区'};
                    data.unshift(ifo);
                    this.bd_info=data
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        // r_c(){
        //     let arr = document.getElementsByClassName("ant-checkbox");
        //     for (let i = 0;i < arr.length;i++) {
        //         arr[i].classList.remove("ant-checkbox-checked");
        //     }
        // },
        pay_type({ key },id) {
            const _this = this;
            // 查看
            if(key === '1') {
                this.$router.push({ name: 'charge_be_pay_detail' , params: {id: id}});
            }
            // 打印
            if(key === '2'){
                for (let i = 0;i < this.data.length;i++) {
                    if (this.data[i].id == id) {
                        this.selectArr = [this.data[i]];
                    }
                }
                this.print_c();
            }
            // 退款
            if(key === '3'){
                this.payment_id = id;
                this.exportVisible3 = true;
                pay_det({token:this.token(),id:id})
                    .then(res => {
                        if(res.code === 0){
                            this.$refs.tables.refresh(true);
                            this.pay_info = res.data;
                            // this.$message.success(res.msg,1);
                        }else{
                            this.$message.error(res.msg,2);
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
                // payBack({token:this.token(),id:id})
                //     .then(res => {
                //         if(res.code === 0){
                //             this.$message.success(res.msg,1);
                //         }else{
                //             this.$message.error(res.msg,2);
                //         }
                //     })
                //     .catch(err => {
                //         console.log(err)
                //     })
            }
        },
        print_c(){
            var lit = this.selectArr;
            let money = 0;
            for (var i=0;i<lit.length;i++) {
                money += Number(this.selectArr[i].price);
            }
            var list = this.group_by(lit, function (item) {
                return [item.info];
            });
            this.m_list = list;
            LODOP = getLodop();
            this.print_lop = true;
        },
        cancel_print() {
            this.print_lop = false;
        },
        print_func(v){
            this.print_m = v + 1;
            this.print_model = this.modelList[v];
            this.get_edit(this.modelList[v].id);
        },
        ok_print() {
            if (this.print_m) {
                LODOP = getLodop();
                LODOP.PRINT_INIT("打印单");
                LODOP.ADD_PRINT_HTM(this.print_model.range_t,this.print_model.range_l,600,300,document.getElementById("model_t").innerHTML);
                LODOP.SET_PRINT_PAGESIZE(this.print_model.layout,this.print_model.p_width,this.print_model.p_height,'A'+this.print_model.paper_type);
                LODOP.PREVIEW();
            } else {
                this.$message.error('请选择模板');
            }
        },
        g_pid(pid,v,name){
            switch (pid) {
                case 30:
                    return this.now_time;
                case 31:
                    return v[0].bd_info_id_text;
                case 32:
                    return v[0].houses_id_name;
                case 33:
                    return v[0].u_name;
                case 34:
                    return v[0].u_phone_n;
                case 35:
                    let money = 0;
                    for (var i=0;i<v.length;i++) {
                        money += Number(v[i].price_n);
                    }
                    return money.toFixed(2);
                case 36:
                    return v[0].pay_time;
                case 37:
                    return v[0].u_name;
                case 38:
                    return v[0].s_name;
                case 39:
                    return v[0].remarks;
                case 40:
                    return v[0].style_text;
                case 41:
                    return '';
                default:
                    return name;
            }
        },
        g_pid2(pid,v,name){
            switch (pid) {
                case 3:
                    return v[0].id;
                case 4:
                    return this.now_time;
                case 5:
                    return v[0].bd_info_id_text;
                case 6:
                    return v[0].houses_id_name;
                case 7:
                    return v[0].u_name;
                case 8:
                    return v[0].u_phone_n;
                case 9:
                    let money = 0;
                    for (var i=0;i<v.length;i++) {
                        money += Number(v[i].price_n);
                    }
                    return money.toFixed(2);
                case 10:
                    return v[0].pay_time;
                case 11:
                    return v[0].u_name;
                case 12:
                    return v[0].s_name;
                default:
                    return name;
            }
        },
        group_by (array, f) {
            const groups = {};
            array.forEach(function (o) {
                const group = JSON.stringify(f(o));
                groups[group] = groups[group] || [];
                groups[group].push(o);
            });
            return Object.keys(groups).map(function (group) {
                return groups[group];
            });
        },
        get_edit(v){
            if(v) {
                this.axios({
                    method:'post',
                    url:'/cashier/model_show',
                    data:{token:this.token(),edit_id:v},
                }).then(res => {
                    if(res.code === 0){
                        this.mod1 = res.data.mod_h;
                        this.mod2 = res.data.mod_b;
                        this.mod3 = res.data.mod_f;
                        this.columns_t = res.data.mod_x;
                        this.now_time = res.data.now_time;
                    }else this.$message.warning(res.msg,2);
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                })
            } else {
                this.edit_id = 0;
            }
        },
        onSearch(value) {
            this.queryParam = {};
            this.house_name = value;
            this.queryParam['name'] = value;
            this.$refs.table.refresh(true);
        },
        exportOk() {
            this.spinning=true;
            this.baseExcDate={pageNo:1,pageSize:100};
            this.exportVisible = false;
            let qu = [];
            this.escec(Object.assign(this.baseExcDate, qu))
        },
        exportCancel() {
            this.exportVisible = false
        },
        exportOk2() {
            this.spinning=true;
            this.baseExcDate={pageNo:1,pageSize:100};
            this.exportVisible2 = false;
            let qu = [];
            qu['bd_info_id'] = this.bd_id;
            qu['type'] = this.lei;
            qu['message'] = this.messages;

            qu['start_time'] = this.start_time_value;
            qu['end_time'] = this.end_time_value;
            qu['jine_max'] = this.jine_max_val;
            qu['jine_min'] = this.jine_min_val;
            qu['jine_max_s'] = this.jine_max_val_s;
            qu['jine_min_s'] = this.jine_min_val_s;
            qu['gj_name_value'] = this.gj_name_value;
            qu['status'] = this.status;
            qu['admin'] = this.admin;
            qu['sou'] = this.sou;
            qu['bd_id'] = this.bd_id;
            qu['lab_id'] = this.lab_id;
            this.escec(Object.assign(this.baseExcDate, qu))
        },
        exportCancel2() {
            this.exportVisible2 = false
        },
        escec(param){
            this.loading = true;
            const _this=this;
            this.axios({
                method:'post',
                url:'/cashier/pay_exp',
                data:Object.assign(param,{token:this.token()})
            }).then(res => {
                if(res.code==0){
                    this.$message.success(`正在生成账单请不要刷新页面\n 当前${res.data.pageNo}/${res.data.totalPage}`,2);
                    // if(res.data.totalCount>res.data.pageNo){
                    _this.baseExcDate.pageNo=_this.baseExcDate.pageNo+1;
                     setTimeout(function(){
                      _this.escec(Object.assign(_this.baseExcDate, _this.queryParam))
                    },1400) 
                    
                    // }
                }else if(res.code==1000){
                    this.spinning=false;
                    window.location.href=this.baseURL+res.url;
                }else{
                    this.spinning=false;
                    this.$message.warning(res.msg,2)
                }
            }).catch(err => {
                this.spinning=false;
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.loading = false;
            })
        },
    }
}
</script>

<style lang="less" scoped>
  .tdx{
    width: 100px;
  }
  .tdx_w{
    font-weight:600;
  }
  .index-box{
    background: #ffffff;
    padding: 25px;
    box-sizing: border-box;
    .content-body{
      padding-top:20px;
    }
    .content-head{
      display: flex;
      align-items: center;
      .content-head-title{
        display: inline-block;
        flex: 1 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .content-head-extra{
        float: right;
      }
    }
  }
  .ptl{
    width: 725px;
    min-height: 300px;
    border: 1px dashed #d9d9d9;
    background-image: url(…6AHRRIAAAAAnRSTlMAsyT7Lw4AAAANSURBVAjXY2hgoCoAACfQAIGM5uSyAAAAAElFTkSuQmCC);
    background-size: 10px 10px;
    pointer-events: none;
    box-sizing: border-box;
    display: block;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
  }
  .ptl1{
    display: inline-block;
    width: 90%;
    margin-left: 5%;
    margin-top:10px;
    text-align:center;
    height: 20%;
    min-height: 60px;
    pointer-events: none;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    position: relative;
  }
  .ptl1_head{
    display: block;
    float: left;
    width: 30%;
  }
  .ptl2{
    display: block;
    pointer-events: none;
    border: 1px #CCCCCC dotted;
    width: 90%;
    height: 50%;
    margin-left: 5%;
    margin-top:10px;
    min-height: 120px;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    position: relative;
  }
  .ptl3{
    display: inline-block;
    pointer-events: none;
    width: 90%;
    margin-left: 5%;
    margin-top:10px;
    text-align:center;
    height: 30%;
    min-height: 60px;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    position: relative;
  }
  .wu_pic{
    width: 20%;
    height: auto;
  }
  .alts{
    float: left;
    margin-top: 20px;
  }
  .aio{
    display: inline-block;
    width: 100%;
  }
</style>